<template>
  <div class="app-container">
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="0">
          UU跑腿
        </el-menu-item>
      </el-menu>
    </div>
    <div style="width: 100%;background-color: #FFFFFF;display: flex;padding: 40px 100px">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">

<!--        <el-form-item label="配送方式：" prop="remark">-->
<!--          <el-input style="width: 400px" v-model="form.remark" disabled placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="对接配送平台：" prop="remark">-->
<!--          <el-input style="width: 400px" v-model="form.remark" disabled placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户IP：" prop="remark">-->
<!--          <el-input style="width: 400px" v-model="form.remark" disabled placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
        <el-form-item label="OPENID：" prop="remark">
          <el-input style="width: 400px" v-model="form.remark" disabled  placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="城市名：" prop="cityName">
          <el-input style="width: 400px" v-model="form.cityName"  placeholder="请输入城市名（需带市）"/>
        </el-form-item>
        <el-form-item label="区县名：" prop="countyName">
          <el-input style="width: 400px" v-model="form.countyName"  placeholder="请输入区县名（需带区或者县）"/>
        </el-form-item>
        <el-form-item label="用户手机号：" prop="userMobile">
          <el-input style="width: 400px" v-model="form.userMobile"  placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="短信验证码：" prop="smsCode">
            <el-input placeholder="短信验证码"  v-model="form.smsCode"></el-input>
            <button @click.prevent="getCode()"  class="code-btn" :disabled="!show">
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{count}} s</span>
            </button>
        </el-form-item>
        <el-form-item label="是否开启服务：" prop="agreementStatus">
          <el-switch
            v-model="status_switch"
            active-color="#13ce66"
          >
          </el-switch>
        </el-form-item>
        <div style="display: flex;justify-content: center">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import auth from '@/plugins/auth'
import { orderauth, sendSmsCode } from '@/api/order'

export default {
  name: 'index',
  data(){
    return {
      show:true,
      activeIndex:'0',
      count:60,
      form:{
        userMobile:'',
        smsCode:'',
        countyName:'',
        cityName:'',
      },
      rules:{
        userMobile:[
      { required: true, message: '请输入手机号', trigger: 'change' }
    ],
        smsCode:[
      { required: true, message: '验证码', trigger: 'change' }
      ],
        countyName: [
          { required: true, message: '请输入区县名', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('请输入区县名'));
              }
              if (!/区|县/.test(value)) {
                callback(new Error('区县名需包含“区”或“县”'));
              } else {
                callback();
              }
            },
            trigger: 'blur' // 你可以在这里选择触发校验的时机，例如'blur'或'change'
          }
        ],
        cityName: [
          { required: true, message: '请输入城市名', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('请输入城市名'));
              }
              if (!/市/.test(value)) {
                // 更正错误消息，使其与检查的内容相匹配
                callback(new Error('城市名需包含“市”'));
              } else {
                callback();
              }
            },
            trigger: 'blur' // 你可以在这里选择触发校验的时机，例如'blur'或'change'
          }
        ]
      },
      status_switch:false
    }
  },
  created() {
  },
  methods:{
    // 获取短信验证码
    getCode() {
      //axios请求
      console.log(this.form.phone);
      // 验证码倒计时
      if (!this.timer)
        sendSmsCode({userMobile:this.form.userMobile}).then(res =>{

        })
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {

            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      },

    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    submitForm(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          orderauth(this.form).then(res=>{
            this.$message.success('保存成功')
          })
        }})
    }
},
}
</script>

<style scoped>

.pr {
  position: relative;
}
.code-btn {
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 222;
  color: #ef8466;
  font-size: 14px;
  border: none;
  border-left: 1px solid #bababa;
  padding-left: 10px;
  background-color: #fff;
  cursor: pointer;
}
</style>
